<template>
  <div class="content card">
    <div class="header">
      <div class="header-btnLeft" @click="goBack">
        <img src="../assets/back-btn.png">
      </div>
      <h1 class="header-title">信用卡支付</h1>
      <div class="header-btnRight"></div>
    </div>
    <div class="payment">
      <div class="priceText">{{totalPricePay}}</div>
      <mt-picker :slots="slots" @change="onValuesChange" :visibleItemCount="3"></mt-picker>
      <div class="thetips">输入信用卡号进行支付</div>
      <div>
        <card
          class="stripe-card"
          id="card"
          ref="cardNumber"
          :class="{ complete }"
          :stripe="stripe_key"
          :options="stripeOptions"
          @change="inputCard($event)"
        />
      </div>
      <div class="safeWrap">
        <div class="safeTips">安全提示:</div>
        <div class="safeTipsText">信用卡信息只用于本次支付，快帮行不保存该信息。</div>
      </div>
      <mt-button type="default" :disabled="payBtnState" plain @click.native="stripePay">确认支付</mt-button>
      <mt-button type="danger" plain @click.native="goBack">取消</mt-button>
    </div>
  </div>
</template>

<script>
import { Card, createToken,cardElement, } from 'vue-stripe-elements-plus';
import { Toast,MessageBox, Indicator,Actionsheet,Picker } from 'mint-ui';
import config from '../store/config';
import wxShare from "../store/wxShare"
import storage from "../store/localstorage";
export default {
  name: "stripe-pay",
  components: {
    Card
  },
  data() {
    return {
      complete: false,
      events: "",
      slots: [],
      stripeOptions: {
        hidePostalCode: true
        // you can configure that cc element. I liked the default, but you can
        // see https://stripe.com/docs/stripe.js#element-options for details
      },
      totalPricePay: "",
      payBtnState: false,
      goods_id:"",
      order_id:"",
      orderType:"",
      order_no:"",
      currency:"CNY"//币种
    };
  },
  mounted() {
    let that = this;
    if(sessionStorage.stripePayInfo && JSON.parse(sessionStorage.stripePayInfo).orderData && JSON.parse(sessionStorage.stripePayInfo).moneyArr){
      let stripePayInfo = JSON.parse(sessionStorage.stripePayInfo);
      this.goods_id=stripePayInfo.orderData.goods_id;
      this.order_id=stripePayInfo.orderData.order_id;
      this.orderType=stripePayInfo.orderData.orderType;
      this.order_no=stripePayInfo.orderData.order_no;
      this.totalPricePay='￥'+stripePayInfo.moneyArr[0].CNY;

      this.slots = [{
          flex: 1,
          values: ['支付币种'],
          className: 'slot1',
          textAlign: 'left'
        },{
          className: 'slot2',
          values: [],
          textAlign: 'right'
        }]

        stripePayInfo.moneyArr.forEach((item,i) => {
          if(item.code == 'CNY'){
            this.slots[1].values[0] = "人民币 CNY ￥"+item.money;
            this.totalPricePay='￥'+item.money;
          }
          if(item.code == 'USD'){
            this.slots[1].values[1] = "美元 USD $"+item.money;
          }
          if(item.code == 'CAD'){
            this.slots[1].values[2] = "加币 CAD $"+item.money;
          }
        });
    }else{
      MessageBox({
        title: "提示",
        message: "缺少支付信息！",
        confirmButtonText: "确定",
        showCancelButton: false
      }).then(res => {
        if(res=='confirm'){
          that.$router.replace({ name: 'my-order', query: { 'time': parseInt(Date.parse(new Date())/1000) }});
        }else{

        }
      });
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    inputCard($event) {
      this.events = $event;
      this.complete = $event.complete;
    },
    onValuesChange(picker, values) {
      if(values.length){
        let price = values[1].split(" ");
        this.currency = price[1];
        this.totalPricePay = price[2];
      }

    },
    stripePay() {
      var _that = this;
      _that.payBtnState = true;
      setTimeout(() => {
        if (!_that.complete) {
          // alert(this.events.error.message)
          if (_that.events.error && _that.events.error.message) {
            MessageBox({
              title: "提示",
              message: _that.events.error.message,
              confirmButtonText: "确定",
              showCancelButton: false
            }).then(res => {
            });
          }
          _that.payBtnState = false;
          return;
        }
        Indicator.open("支付中...");
        createToken().then(data => {
          var params = {
            currency: _that.currency,
            stripeToken: data.token.id,
            order_id: _that.order_id,
            orderType: _that.orderType,
            order_no: _that.order_no
          };
          Indicator.close();
          _that.axios
            .post("/wap/notify/payByCredit", params, true)
            .then(res => {
              _that.payBtnState = false;
              if (res.data.status == "succeeded") {
                _that.$router.replace({ path: "/pay-success",query:{goods_id:_that.goods_id,order_id: _that.order_id}});
              } else {
                MessageBox({
                  title: "提示",
                  message: res.msg,
                  confirmButtonText: "确定",
                  showCancelButton: false
                }).then(res => {
                });
              }
            })
            .catch(err => console.log(err));
          _that.payBtnState = false;
        });
      }, 0);
    }
  },
  beforeRouteLeave(to, from, next) {
    sessionStorage.removeItem("stripePayInfo");
    next();
  }
};
</script>
<style lang="scss">
@import "../assets/base";
.card .header {
  display: flex;
  align-items: center;
  padding: rpx(30);
  justify-content: space-between;
  background: $color0;
  &-btnLeft {
    width: rpx(64);
    height: rpx(64);
    padding-top: rpx(16);
    img {
      width: rpx(32);
      height: rpx(32);
    }
  }
  &-btnRight:after {
    display: block;
    content: " ";
    width: rpx(64);
    height: rpx(64);
  }
  &-title {
    flex: 1;
    font-size: rpx(36);
    text-align: center;
    font-weight: normal;
  }
}
.card .picker-item{
  color: #AFBBC5;
  font-size: rpx(28);
}
.card .picker-item.picker-selected{
  color: #000;
}
.card .payment {
  color: black;
  padding: rpx(20);
  .stripe-card {
    // margin: rpx(10) rpx(10) rpx(20) rpx(10);
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .cc-number {
    color: #ccc;
    font-size: rpx(32);
    font-weight: bold;
  }

  /* -- transition --*/
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.25s ease-out;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .StripeElement {
    background-color: white;
    padding: rpx(10) rpx(6);
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
  }

  .StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
  }

  .StripeElement--invalid {
    border-color: #fa755a;
  }

  .StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
  }

  .safeTips {
    margin-top: rpx(20);
    font-size: rpx(24);
    color: #ff8359;
  }
  .safeTipsText {
    font-size: rpx(24);
    margin: rpx(10) 0 rpx(25) 0;
  }
  .priceText {
    margin-top: rpx(22);
    text-align: center;
    font-size: rpx(76);
  }

  .safeWrap {
    padding-left: rpx(12);
  }
  .thetips {
    padding-left: rpx(12);
    font-size: rpx(26);
    margin-top: rpx(30);
    margin-bottom: rpx(18);
  }
  button {
    margin-top: rpx(50);
    width: 100%;
  }
  button + button {
    margin-top: rpx(20);
  }
}
</style>
